<template>
  <!-- 服务 -->
  <view v-if="productSafeguard && productSafeguard.stopDeliveryFlag === 1" class="x-delivery" >
    <view class="x-delivery-title">
      <x-icon style="margin-right: 5px;" name="icon-051" size="40" color="#C81300" />
      春节快递停运，{{ Number(startTime[1]) }}月{{ Number(startTime[2]) }}号~{{ Number(endTime[1]) }}月{{ Number(endTime[2]) }}号暂停发货
    </view>
    <view class="x-delivery-bg">
      <view class="x-delivery-bg-text">
        因春节期间快递停运，本店所有产品<text class="color-red">{{ Number(startTime[1]) }}</text>月<text class="color-red">{{ Number(startTime[2]) }}</text>日起停止发货，预计<text class="color-red">{{ Number(endTime[1]) }}</text>月<text class="color-red">{{ Number(endTime[2]) + 1 }}</text>起按照<text class="color-red">订单顺序开始发货，先拍先发！</text>请注意发货时间，介意的慎拍哦，造成不便敬请谅解！
        <br>
        祝大家新年快乐，大吉大利！
      </view>
    </view>
  </view>
</template>

<script>
import XIcon from '@/components/x-icon';

export default {
  name: 'XDelivery',
  components: {
    XIcon
  },
  props: {
    productSafeguard: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {};
  },
  computed: {
    startTime() {
      return this.productSafeguard ? this.productSafeguard.stopDeliveryStartDate ? this.productSafeguard.stopDeliveryStartDate.split('-') : '' : '';
    },
    endTime() {
      return this.productSafeguard ? this.productSafeguard.stopDeliveryEndDate ? this.productSafeguard.stopDeliveryEndDate.split('-') : '' : '';
    }
  },
  methods: {
  }
};
</script>

<style lang="scss">
//  服务
.x-delivery {
  background: #fff;
  .x-delivery-title {
    display: flex;
    align-items: center;
    font-size: 32px;
    color: #C81300;
    padding: 22px;
    font-weight: bold;
  }
  .x-delivery-bg {
    width: 100%;
    height: 491px;
    background-image: cdn('/images/delivery-bg.png');
    background-size: 100%;
    background-repeat: no-repeat;
    &-text {
      font-size: 32px;
      color: #000000;
      line-height: 52px;
      padding: 152px 60px 0 60px;
    }
  }
  .color-red {
    color: #C81300;
    font-weight: bold;
  }
}
</style>
